<template>
    <div class="jx-content">
        <div class="collapseShow" v-if=" !listshow.length" >
            <div class="fl courseName">
                {{Titlename}}
            </div>
            <div class="btn-group fr">
                <div class="button-style" @click="revise" >&emsp;添 加&emsp;</div>
            </div >
            <div  class="emptyChaper">
                <div class="emptylist">
                    <img src="../../../assets/images/index_no_data.png"/>
                    <p>暂无内容</p>
                    <p>点击右上角按钮快去添加~</p>
                </div>
            </div>
        </div>
        <div class="collapseShow" v-if="listshow.length > 0" >
            <div class="fl courseName">
                {{Titlename}}
            </div>
            <div class="btn-group fr">
                <div class="button-style" @click="revise" >&emsp;修 改&emsp;</div>
            </div>
           <div class="collapselist">
                <el-collapse v-model="activeNames">
                    <el-collapse-item   v-for="(item, index) in listshow" :key="index" :name="index" >
                        <template slot="title" >
                            <p style="font-size:16px;color:#787878;">单元{{index+1}} &nbsp;{{item.name}}</p>
                        </template>
                        <div v-if="item.chapterList.length > 0">
                            <div v-for="(item2, index2) in item.chapterList" :key="index2" :name="item2.id" class="listshowClass">
                                <div class="fl listshowClass-left">
                                    <span>{{index2+1}}、{{item2.name}} &nbsp;</span>
                                    <i class="iconfont icon-diannao-copy telphone" v-if="item2.type == 2 || item2.type == 3 "></i>
                                    <i class="iconfont icon-tubiaozhizuomoban1 telphone"  v-if="item2.type == 4"></i>
                                </div>
                                <!-- <div class="fl">
                                    <i class="iconfont icon-diannao-copy" v-if="item2.type == 2 || item2.type == 3 "></i>
                                    <i class="iconfont icon-tubiaozhizuomoban1"  v-if="item2.type == 4"></i>
                                </div> -->
                                <div class="fl listshowClass-right">&nbsp; &nbsp;{{item2.introduction}} </div>
                            </div>
                        </div>
                        <div v-else>
                            <span style="color:#8e8e8e">暂无数据</span>
                       </div>
                   </el-collapse-item>
                </el-collapse>
           </div>
        </div>
        <div class="transforAll" >
            <div class="transfor" >
                <div class='systemLeft fl'>
                    <div class="navBoxs">
                        <p><el-checkbox class="navBoxs-box" v-model="checkboxAll" v-if="!chaperInfo"  @change="handleCheckAllChange"></el-checkbox>章节信息</p>
                    </div>
                    <div class="transfer-left blocks">
                        <div class="transfer-main">
                            <div v-if="!fromData.length" class="emptylist">
								<img src="../../../assets/images/index_no_data.png"/>
								<p>暂无内容</p>
							</div>
                            <div v-if="chaperInfo" class="emptylist">
								<img src="../../../assets/images/index_no_data.png"/>
								<p>暂无内容</p>
							</div>
                            <div v-for=" item in fromData"  :key="item.id"  v-else >
                                <div v-if="!item.containCourseSortFlag " class="checkboxlist">
                                    <el-checkbox-group v-model="checkList"  @change="handleCheckedCitiesChange">
                                        <el-checkbox  :label="item.id" :key="item.id">
                                            <img src="../../../assets/images/iconfile.png" />
                                            <span class="names-label">{{item.name}} </span>
                                            <span>
                                                <i class="iconfont icon-diannao-copy" v-if="item.type == 2 || item.type == 3 "></i>
                                                <i class="iconfont icon-tubiaozhizuomoban1"  v-if="item.type == 4"></i>
                                            </span>
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </div>
                        </div>
                     </div>
                </div>
                <div class='systemMiddle fl'>
                    <i class="iconfont icon-xiangyou1"></i>
                </div>
                <div class='systemRight fl'>
                    <div class="navBoxs">
                        <p>章节分类</p>
                    </div>
                    <div class="transfer-right blocks" >
                        <div v-if="!addressee.length " class="emptylist">
                            <img src="../../../assets/images/index_no_data.png"/>
                            <p>暂无内容</p>
                            <p>点击右下角按钮快去添加~</p>
                        </div>
                        <div v-else>
                            <div  class="transfer-right-item"  v-for="(item, index) in addressee" :key="index">
                                <p class="transfer-title" @click="moveUp(item)" >
                                    <img src="../../../assets/images/filescourse.png" class="filescourse"/>
                                    <span v-if="!fromDisabled" class="titleIcon">{{'第'+(index+1)+'单元'}} {{ item.name }}</span>
                                    <span v-if="fromDisabled" class="titleIcon" >{{'第'+(index+1)+'单元'}} {{ item.name }}</span>
                                    <span  class="transfer-center-item "  @click.stop="addressListTransfer(item,index)">
                                        <el-button  type="primary"  circle  :disabled="fromDisabled">加入本单元</el-button>
                                    </span>
                                    <i class="iconfont icon-xiala-copy move_up_img "  v-if="item.move_up " v-show="item.chapterList != '' && item.chapterList" ></i>
                                    <i class="iconfont  icon-shouqi  move_up_img "  v-if="!item.move_up" v-show="item.chapterList != '' && item.chapterList"  ></i>
                                </p>
                                <!-- 内容区 -->
                                <el-collapse-transition>
                                    <div class="transfer-main"  v-if="!item.move_up">
                                        <ul class="address-list-ul block">
                                            <draggable v-bind="dragOptions" @change='endEvent()' v-model="item.chapterList">
                                                <li  class="address-list-li list-group-item" v-for="(item2, index2) in item.chapterList" :key="index2">
                                                    <img src="../../../assets/images/iconfile.png" v-if="item.chapterList.length>0" class="img-icon"/>
                                                    <label>
                                                        {{item2.name}}&nbsp;

                                                    </label>
                                                    <i class="iconfont icon-diannao-copy" v-if="item2.type == 2 || item2.type == 3 "></i>
                                                    <i class="iconfont icon-tubiaozhizuomoban1"  v-if="item2.type == 4"></i>

                                                    <i class=" iconfont icon-Group- address-list-del" @click="clearList(item2,item2.id)"></i>
                                                </li>
                                            </draggable>
                                        </ul>
                                    </div>
                                </el-collapse-transition>
                            </div>
                        </div>
                    </div>
                    <span class="edit">
                        <i class="iconfont icon-icon_edit" @click="edit"></i>
                    </span>
                </div>
            </div>
            <div class="save">
                <button class="button-style" @click="allSave" style="margin-right:14px">保 存</button>
                <button class="button-style" @click="cancel">返 回</button>
            </div>
            <el-dialog :close-on-click-modal="false" title="添加章节分类"  :visible.sync="dialogPreviews" width="600px"  class="preview" @close='dialogClose'>
				<el-input placeholder="请输入内容"  v-model.trim="chaperContent" maxlength="50" ></el-input>
				<button class="button-save" v-if="chaperContent" @click="dialog">保 存</button>
				<button class="button-dark" v-else>添 加</button>
				<ul class="block">
                    <draggable  v-bind="dragOptions"  @change='endEvent()' class="list" v-model="list">
                        <li v-for="(item,index) in list" :key="index">
                            <img src="../../../assets/images/filescourse.png" class="filescourse"/>
                            <input type="text" maxlength="50"  v-model="replaceTitles" class="text-input" v-focus   v-if="todoEdie == item"  @keyup.13="editorend(item)" @blur="blurend(item)"/>
                            <label v-else class="textedits">{{'第'+(index+1)+'单元'}} {{item.name}}</label>
                            <span class="operation">
                                <i class="el-icon-edit" @click="editList(item)"></i>
                                <i class="iconfont icon-cuowu" @click="delItem(item)"></i>
                            </span>

                        </li>
                    </draggable>
				</ul>
				<button @click="savesNosysterms" class="button-style centers" v-if="chaperContent.length <= 0">确 定</button>
                <el-button class="button-style centers centersEmpty"  v-else>确 定</el-button>
			</el-dialog>
        </div>
    </div>
</template>

<script>
    import draggable from 'vuedraggable'
    export default {
        components: {
            draggable
        },
        data () {
            return {
                //页面的id
                id:'',
                //课程名
                Titlename:'',
                //章节信息
                checkList:[],
                // 添加按钮是否禁用
                fromDisabled: true,
                //右侧数据
                addressee:[],
                //左侧数据
                fromData:[],
                //课程
				chaperContent:'',
				//判断是否是当前那个
				todoEdie:'',
				//弹窗
                dialogPreviews:false,
                //弹窗数据
                list:[],
                //判断左侧是否为空
                chaperInfo:'',
                //修改内容
                listshow:[],
                //选中索引集合展开
                activeNames:[],
                //全选
                checkboxAll:false,


                inds:0

            }
        },
        created(){
            this.id = this.$localstorage.getLocalStorage('setCourseId')
            this.Titlename = this.$localstorage.getLocalStorage('CourseTitle')
            this.init();
            //左侧数据
            this.inintLeftData()
            //右侧数据
            this.inintRighttData()

        },
        computed: {
			//拖拽插件
			dragOptions() {
				return {
					animation: 200,
					group: "description",
					disabled: false,
				};
			},
		},
        watch: {
			checkList(val){
				if (val.length > 0) {
				// 穿梭按钮是否禁用
					this.fromDisabled = false;
				} else {
					this.fromDisabled = true;
                }

			},
			fromData:{
				handler(newValue, oldValue){
					let containCourseSortFlag = newValue.every((item)=>{
						return item.containCourseSortFlag
					})　　　　　　　　
                    this.chaperInfo = containCourseSortFlag
                    this.checkboxAll = false
				},
				deep:true
            },

		},
        methods:{

            //初始化导航刷新
            init(){
                let self = this
                self.$http.get('/tes/course/'+ self.id+'/chapter/list/owner').then(response => {
                    let res = response.data
                    if(res.code == '200') {
                        //已经有章节,判断导航显示
                        self.$parent.mark = false
                        self.$parent.chaperFlag = false
                    }else if(res.code == '404'){
                        //暂无章节,判断导航显隐藏
                        this.$parent.mark=true
                        this.$parent.chaperFlag=false

                    }
                }).catch(err => {
                     self.$message.error(res.message)
                })
            },
            //获得左侧数据
            inintLeftData(){
                let self = this
                self.$http.get('/tes/course/'+self.id+'/chapter-course-sort/chapter-list').then(response => {
                    let res = response.data
                    if(res.code == '200') {
                        self.fromData = res.data

                    }
                }).catch(err => {
                     self.$message.error(res.message)
                })
            },
            //获得右侧数据
            inintRighttData(){
                let self = this
                self.$http.get('/tes/course/'+self.id+'/chapter-course-sort-list').then(response => {
                    let res = response.data
                    if(res.code == '200') {
                        let lists = []
                       	for(let i = 0; i < res.data.length; i++){
                            //此需求是为了展开所有项（白哥要求）
                            if(!self.activeNames.includes(i)){
                                self.activeNames.push(i)
                            }
                            self.$set(res.data[i],'move_up',true)
                            lists.push({id:res.data[i].id,name:res.data[i].name})
                        }
                        self.list = lists
                        self.listshow = res.data
                        self.addressee =  res.data

                    }else{
                        self.addressee =  []
                        self.listshow = []
                    }
                }).catch(err => {
                    self.$message.error(res.message)
                })
            },
            //移动数据
            addressListTransfer(item,index){
                //左侧数据删除
                let self = this
				if(!self.fromDisabled){
					for(var i=0; i<self.addressee.length; i++){
						self.addressee[i].move_up = true
					}
					item.move_up = false
				}
				let arr =[]
				let childrens =[]
				for(let k=0; k< self.fromData.length; k++){
					for(let i=0; i < self.checkList.length; i++){
						if( self.fromData[k].id == this.checkList[i]){
							//this.fromData[k].phaseAllocatted = false
							self.$set(self.fromData[k],'containCourseSortFlag',true)
							arr.push(self.fromData[k])
						}
					}
				}
				for(let m =0; m < arr.length; m++){
					//如果新建的没有子集children
					if(self.addressee[index].chapterList == undefined){
						self.addressee[index].chapterList = childrens
					}
					self.addressee[index].chapterList.push(arr[m])
				}

                self.checkList = []

            },
            //清除数据
            clearList(item,id){
                let self = this
				for(let i=0; i < self.addressee.length; i++){
					if(self.addressee[i].chapterList){
						let newData = self.addressee[i].chapterList.filter(function(value){
							return value.id !== id
						})
						self.addressee[i].chapterList = newData
					}
                }
                //返还左侧数据
                self.fromData.forEach(t => {
                    if (t.id == id) {
                        t.containCourseSortFlag = false
                    }
                })
                this.$forceUpdate()

            },
            //拖拽数据
			endEvent(){
			   	this.$forceUpdate()
            },
            endEvent2(){
                this.$forceUpdate()
            },
            //关闭弹窗
            dialogClose(){
                this.list = []
            },
            //点击全选
            handleCheckAllChange(val){
                let self = this
                let checkboxAllArray = []
                for(let i=0; i< self.fromData.length; i++){
                    if(!self.fromData[i].containCourseSortFlag){
                         checkboxAllArray.push(this.fromData[i].id)
                    }
                }
                self.checkList = val ? checkboxAllArray : [];
            },
            //子集全选
            handleCheckedCitiesChange(value){
                let self = this
                let checkboxAllArray = []
                for(let i=0; i< self.fromData.length; i++){
                    if(!self.fromData[i].containCourseSortFlag){
                        checkboxAllArray.push(this.fromData[i].id)
                    }
                }
                let checkedCount = value.length;
                if(checkedCount === checkboxAllArray.length){
                    this.checkboxAll =  true
                }else{
                    this.checkboxAll =  false
                }
            },
            //取消选中
			cancel(){
                this.checkList = []
                this.checkboxAll =  false
				$('.collapseShow').show()
                $('.transforAll').hide()
                this.inintRighttData();
                this.inintLeftData()
			},
            //修改
            revise(){
                $('.transforAll').css('display','block')
                $('.collapseShow').css('display','none')
                this.inintRighttData();
                this.inintLeftData()
            },
            //保存
            allSave(){
                let self = this
                const loading = self.$loading({
					lock: true,
					text: '正在保存中...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})
                self.$http.post('/tes/course/'+self.id+'/chapter-course-sort',self.addressee).then(response => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
							message: '保存成功',
							type: 'success'
                        })
                        // self.inintLeftData()
                        // self.inintRighttData()
                        $('.collapseShow').css('display','block')
                        $('.transforAll').css('display','none')
                        loading.close()
                        self.checkList = []
                    }else{
                        self.$message.error(res.message)
                        loading.close()
                    }
                 })
                .catch(err => {
					loading.close()
                })


            },
            //伸缩
			moveUp(item){
                let self = this
				if(item.move_up){
					for(var i=0; i < self.addressee.length; i++){
						this.addressee[i].move_up = true
					}
					item.move_up = !item.move_up
				}else{
					item.move_up = !item.move_up
                }
                //this.$forceUpdate()
			},
            //编辑
            edit(){
                this.saveList()
                this.inintRighttData()
                this.dialogPreviews = true
                this.chaperContent = ''
            },
            //仅用于编辑保存
            saveList(){
                let self = this
                self.$http.post('/tes/course/'+self.id+'/chapter-course-sort',self.addressee).then(response => {
                    let res = response.data
                    if(res.code == '200') {
                    }else{
                        self.$message.error(res.message)
                    }
                 })
                .catch(err => {

                })
            },
            //弹窗保存
            savesNosysterms(){
                let self = this
				const loading = self.$loading({
					lock: true,
					text: '正在保存中...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})
                self.$http.post('/tes/course/'+self.id+'/course-sort',self.list).then(response => {
                    let res = response.data
                    if(res.code == '200') {
					    self.$message({
							message: '保存成功',
							type: 'success'
                        })

                        self.inintLeftData()
                        self.inintRighttData()
                        self.dialogPreviews = false
                        loading.close()

                    }else{
						self.$message.error(res.message)
						loading.close()
                    }
                 })
                .catch(err => {
					loading.close()
                })
            },
            //删除某项
			delItem(item){
                this.list = this.list.filter((val)=>{
					return !(val.id == item.id && val.name == item.name)
				})
			},
            //弹窗添加
            dialog(){
				for(let i=0; i< this.list.length; i++){
					if(this.list[i].name == this.chaperContent){
						this.$message({
							message: '不能添加重复名称',
							type: 'warning'
						})
						this.chaperContent = ''
						return
					}
				}
				this.list = this.list.concat({'name':this.chaperContent,'id':0,inds:this.inds++})
				this.chaperContent = ''
                console.log(this.list,147)
			},
            //编辑结束
			editorend(item){
                let vall = JSON.parse(JSON.stringify(this.list))
				for(let i=0;i < vall.length; i++){
                    if(vall[i].inds == item.inds && item.id == 0 ){
                        this.todoEdie = ''
                        vall[i].name = this.replaceTitles

                    }
					else if(vall[i].id == item.id && vall[i].name == item.name && item.id !== 0 ){
						this.todoEdie = ''
						vall[i].name = this.replaceTitles

					}
				}
				this.list = vall
			},
			//鼠标离开焦点
			blurend(item){
                let vall = JSON.parse(JSON.stringify(this.list))
				for(let i=0;i < vall.length; i++){
                    if(vall[i].inds == item.inds && item.id == 0 ){
                        this.todoEdie = ''
                        vall[i].name = this.replaceTitles

                    }
	                else if(vall[i].id == item.id && vall[i].name == item.name && item.id !== 0){
						this.todoEdie = ''
						vall[i].name = this.replaceTitles

					}
				}
                this.list = vall

            },
            //编辑每项
			editList(item){
				for(let i= 0; i < this.list.length; i++){
					if(this.list[i].id == item.id  ){
						this.todoEdie = item
                        this.replaceTitles = item.name
					}
                }

            },

        }
    }
</script>
<style scoped>
    .telphone{
        vertical-align: super
    }
    .el-checkbox__label{
        line-height: 32px;
    }
    .el-collapse>>>.el-collapse-item__content{
        border-top:1px solid  #EBEEF5;
    }
    .el-checkbox>>>.el-checkbox__input{
        vertical-align: sub
    }
    .transforAll{
        display: none;
    }
    .el-input{
        display: inline;
    }
    .el-input>>>.el-input__inner{
        width: 280px;
    }
    .collapseShow>>>.el-collapse-item__header{
        background: #fafafa;
    }
    .collapseShow>>> .el-icon-arrow-right{
        display: none
    }
    .collapseShow>>>.el-collapse-item__header{
        height: 55px;
        line-height: 55px;
        padding-left: 40px;
    }
    .collapseShow>>>.el-collapse-item__content{
        padding: 20px 60px
    }
   .el-button--primary{
        background-color:transparent;
        border-color:#d9d9d9;
        color: #999;
    }
    .el-button--primary.is-disabled{
        color: #999;
        background-color:transparent;
        border-color:#d9d9d9;
    }
    .el-button--primary{
        /* background-color:transparent;
        color: #1276eb; */
        color: #999;
    }
    .block::-webkit-scrollbar{
        width: 2px;
    }
    .block::-webkit-scrollbar-thumb {
        background: #dededd;
        border-radius:50px;
    }
    .block{
        overflow-y: scroll;
        max-height: 430px;
    }
    .blocks::-webkit-scrollbar{
        width: 2px;
    }
    .blocks::-webkit-scrollbar-thumb {
        background: #d8d8d8;
        border-radius:50px;
    }
    .blocks{
        overflow-y: scroll;
        max-height: 470px;
    }
</style>
<style lang="scss" scoped>
    .jx-content{
        margin: 20px auto;
    }
    .collapseShow{
        .collapselist{
            clear: both;
            padding: 30px 0;
        }
        .courseName{
            font-size: 18px;
        }
    }
    .transfor{
        max-width: 910px;
        margin: 20px auto;
        overflow: hidden;
        .systemLeft{
            width: 400px;
            height: 590px;
            border: 1px solid #ebeef5;
            border-radius: 3px;
            position: relative;
        }
        .systemMiddle{
            width: 105px;
            line-height: 590px;
            height: 590px;
            text-align: center;
            i{
                font-size: 26px;
                color: #c9c9c9;
            }
        }
        .systemRight{
            width: 400px;
            height: 590px;
            border: 1px solid #ebeef5;
            border-radius: 3px;
            position: relative;
        }
    }
    .navBoxs{
        background: #fafafa;
        text-align: center;
        .navBoxs-box{
            position: relative;
            left: -147px;
        }
        &>p{
            color: #727272;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #e8e8e8
        }
    }
    .save{
        margin: 40px auto;
        width: 160px;
        clear: both;
    }
    .transfer-left {
        padding: 25px 0px;
    }
    .transfer-main {
        padding: 0px 18px;
        .address-list-ul{
            padding-left: 6px;
        }

    }
    .icon-diannao-copy{
        font-size: 14px;
        color: #409EFF;

    }
    .emptylist{
        margin:  160px auto;
        text-align: center;
        &>p{
            line-height: 26px;
            color: #999999;
        }
        &>img{
            margin-bottom: 8px;
        }
    }
     .edit{
        position: absolute;
        bottom: 14px;
        right: 25px;
        font-size: 20px;
        cursor: pointer;
        &:hover{
            .icon-icon_edit{
                color: #4c9ffe;
            }
        }

    }
    .icon-icon_edit{
        color: #1277eb;
        font-size: 20px;
    }
    .el-button.is-circle{
        padding:3px 5px;
        border-radius:4px;
    }
    .titleIcon{
        max-width: 200px;
        overflow: hidden;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: bottom;

    }
    .transfer-right {
        padding: 20px 10px;
    }
    .transfer-title{
        padding: 0 10px;
        height: 35px;
        line-height: 35px;
        //color: #1276eb;
        font-size: 14px;
        &:hover{
            color: #1276eb;
            cursor: pointer;
            .titleIcon{
                color: #1276eb;
            }
            .el-button--primary{
                color: #1276eb;
                border-color:#1276eb;
            }
            .el-button--primary.is-disabled{
                border-color:#d9d9d9;
                color: #999;
            }
            i{
                color: #1276eb;
            }

         }
    }

    .filescourse{
        vertical-align: 1px;
        margin-right: 2px;
    }
     .move_up_img {
        float: right;
        cursor: pointer;
    }
    .address-list-li {
        position: relative;
        padding: 6px 10px 6px 4px;
        border-radius: 3px;
        line-height: 25px;
        height: 25px;
        overflow: hidden;
        cursor: pointer;
        label{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 240px;
            display: inline-block;
            vertical-align: middle;

        }
        .icon-tubiaozhizuomoban1{
            font-size: 15px;
            color: #409EFF;
            vertical-align: -1px;
            display: inline-block
        }
    }
    .address-list-li:hover {
        background-color: #f5f7fa;
    }
    .address-list-li:hover .address-list-del {
        display: block;
    }
        .address-list-del {
        display: none;
        position: absolute;
        top: 50%;
        right: 10px;
        margin-top: -6px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-style:normal;
        text-align: center;
        color: #727272;
        cursor: pointer;
    }
    .icon-shouqi ,.icon-xiala-copy{
        font-size: 20px;
        margin-top: 6px;
        height: 25px;
        color: #cccccc;
    }
    .checkboxlist{
        height: 33px;
        line-height: 33px;
         .icon-tubiaozhizuomoban1{
            font-size: 16px;
            color: #1277eb;
        }

    }
    .names-label{
        max-width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        vertical-align: middle;
        padding-left: 5px;

        //  &:hover{
        //     border: 1px dashed #2767a6;
        //     background: #d6eafe;
        //     padding: 1px 2px;
        //     color: #1277eb;
        // }
    }
    .button-dark{
        background: #8c8d90d6;
        color: #fff;
        cursor: pointer;
        height: 32px;
        line-height: 32px;
        border-radius: 3px;
        width: 52px;
        margin-left: 4px;
        margin-top: -2px;
    }
    .button-save{
        background: #1277eb;
        color: #fff;
        cursor: pointer;
        height: 32px;
        line-height: 32px;
        border-radius: 3px;
        width: 52px;
        margin-left: 4px;
        margin-top: -2px;
    }
     //弹窗样式
    .list{
        margin: 14px 0px;
    }
    .list>li{
        line-height: 32px;
        height: 32px;
        padding-left: 10px;
        max-width: 410px;
    }
    .list .textedits{
        max-width: 320px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
    }
    .list>li:hover{
        cursor: pointer;
    }
    .list>li:hover  .operation{
        display: inline-block;
    }
    .operation{
        display: none;
    }
    .icon-cuowu{
        color: #a1a1a1;
        cursor: pointer;
    }
    .el-icon-edit{
        font-size: 18px;
        color: #a1a1a1;
        cursor: pointer;
        margin-left: 10px;
    }
    .el-icon-circle-close{
        font-size: 18px;
        color: #a1a1a1;
        cursor: pointer;
        margin-left: 5px;
    }
    .text-input{
        height: 30px;
        line-height: 30px;
        border-radius: 3px;
        border: 1px solid #2b77e5;
        color: #979797;
        margin-left: 5px;
        padding-left: 5px;
        width: 300px;
    }
    .list-group-item{
        cursor: move;
        .img-icon{
            vertical-align: -2px
        }
    }
    .centers{
        margin: 0 auto;
        display: block;
    }
    .emptyChaper{
        clear: both;
        overflow: hidden;
    }
    .listshowClass{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 980px;
        color: #8e8e8e;
        padding: 5px 0;
        .listshowClass-left{
            width: 235px;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // white-space: nowrap;
            margin-right: 8px;
            span{
                max-width: 235px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: inline-block
            }
            .icon-tubiaozhizuomoban1{
                font-size: 16px;
                color: #409EFF;
                vertical-align: super;
            }
        }
        .listshowClass-right{
            width: 710px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-left: 10px;
        }
         .icon-tubiaozhizuomoban1{
            font-size: 16px;
            color: #409EFF;
        }
    }
    .preview{
        .centersEmpty{
            color: #999;
            border: 1px solid #999;
            &:hover{
                background: transparent;
                color: #999;
                cursor: not-allowed
            }
        }
        .sortable-chosen{
            background: #d6eafe;
            border: 1px dashed #467cb3;
            color: #1577ea;
        }

    }


</style>
